<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :model="queryParams" :inline="true" label-width="75px">
			<el-form-item label="用户ID：" prop="uuid">
				<el-input v-model.trim="queryParams.uuid" placeholder="请输入用户ID" maxlength="6" clearable show-word-limit />
			</el-form-item>
			<el-form-item label="手机号码:" prop="mobile">
				<el-input v-model.trim="queryParams.mobile" placeholder="请输入手机号码" maxlength="11" clearable show-word-limit />
			</el-form-item>

			<el-form-item label="状态:" prop="status">
				<el-select v-model="queryParams.status" placeholder="请选择状态">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<!--				<el-cascader ref="consigneeOps" v-model="queryParams.status" :options="options" @change="cascader"></el-cascader>-->
			</el-form-item>

			<start-end-time ref="child" title="创建日期:" :get-time="getTime"></start-end-time>
			<el-form-item label="业务类型:" prop="businessType">
				<el-select v-model="queryParams.businessType" placeholder="全部">
					<el-option v-for="item in businessType" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<!-- <div slot="card" class="mb-[24px] flex items-center">
      <LStatisticalLeft left-name="已使用消费券" :left-value="statistics.totalSub" />
      <LStatisticalLeft left-name="实时消费券" :left-value="statistics.totalSurplus" />
    </div> -->
		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
			<el-button type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button>
		</template>
		<el-table v-loading="loading" stripe :data="orderList">
			<el-table-column :formatter="emptyToString" type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column :formatter="emptyToString" label="财务编号" align="center" prop="source" />
			<el-table-column :formatter="emptyToString" label="用户ID" align="center" prop="uuid" />
			<el-table-column :formatter="emptyToString" label="手机号码" align="center" prop="mobile" min-width="110" />
			<!-- <el-table-column :formatter="emptyToString" label="收支类型" align="center" prop="type">
        <template slot-scope="scope">
          <div>{{ scope.row.type === '1' ? '收入' : '支出' }}</div>
        </template>
      </el-table-column> -->
			<el-table-column :formatter="emptyToString" label="业务类型" align="center" prop="businessType" />
			<el-table-column :formatter="emptyToString" label="状态" align="center" prop="status">
				<template slot-scope="scope">
					<div>{{ scope.row.status === 1 ? '已结算' : '待结算' }}</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToNumber" align="center" label="提货单" min-width="120" prop="waitGoodsRoll"></el-table-column>
			<!-- <el-table-column :formatter="emptyToString" label="备注" align="center" prop="remarks" style="min-width: 100px">
        <template slot-scope="scope">
          <div class="multi-line" style="min-width: 80px" v-text="scope.row.remarks || '-'"></div>
        </template>
      </el-table-column> -->
			<el-table-column :formatter="emptyToString" align="center" label="创建时间" min-width="200" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span v-if="scope.row.createTime != null">{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span v-if="scope.row.createTime != null">{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
						<span v-if="scope.row.createTime == null">-</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="结算时间" min-width="200" prop="updateTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span v-if="scope.row.updateTime != null">{{ dayjs(scope.row.updateTime).format('YYYY-MM-DD') }}</span>
						<span v-if="scope.row.updateTime != null">{{ dayjs(scope.row.updateTime).format('HH:mm:ss') }}</span>
						<span v-if="scope.row.updateTime == null">-</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" label="操作" align="center" prop="remarks" style="min-width: 100px">
				<template slot-scope="scope">
					<div v-if="scope.row.status === 0" class="multi-line" style="min-width: 80px; color: #707ad1" @click.stop="handleDetail(scope.row)" v-text="'结算'"></div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 结算 -->
		<l-dialog v-model="openDetails" ok-button-text="确认结算" close-button-text="取消" title="提货单结算" width="483px" @formClose="handleClose" @formSubmit="submitForm">
			<el-form disabled label-position="left" label-width="80px">
				<el-form-item label="用户ID:">
					<el-input v-model.trim="info.uuid" clearable :disabled="true" show-word-limit />
				</el-form-item>
				<el-form-item label="手机号码:">
					<el-input v-model.trim="info.mobile" clearable :disabled="true" show-word-limit />
				</el-form-item>
				<el-form-item label="金额:">
					<el-input v-model.trim="info.waitGoodsRoll" clearable :disabled="true" show-word-limit />
				</el-form-item>
				<el-form-item label="提现方式:">
					<el-input v-model.trim="info.waitGoodsRoll" clearable :disabled="true" show-word-limit />
				</el-form-item>
				<el-form-item label="银行:">
					<el-input v-model.trim="info.bankName" clearable :disabled="true" show-word-limit />
				</el-form-item>
				<el-form-item label="银行卡号:">
					<el-input v-model.trim="info.bankCode" clearable :disabled="true" show-word-limit />
				</el-form-item>
				<el-form-item label="收款人:">
					<el-input v-model.trim="info.userName" clearable :disabled="true" show-word-limit />
				</el-form-item>
			</el-form>
			<!--			<div class="btn-box">-->
			<!--				<el-button  @click="handleClose">取消</el-button>-->
			<!--				<el-button type="primary" @click="handleClose">确认结算</el-button>-->
			<!--			</div>-->
		</l-dialog>
	</l-page>
</template>

<script>
import { getGoodsRollRecord } from '@/api/mall/topup';
import dayjs from 'dayjs';

export default {
	name: 'BalanceRecord',
	data() {
		return {
			dayjs,
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 订单表格数据
			orderList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			info: {},
			openDetails: false,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				mobile: null,
				uuid: null,
				businessType: null,
				types: [],
				beginTime: null,
				endTime: null,
				date: [],
				balanceType: null,
				status: null,
			},
			// 表单参数
			form: {},
			// 表单校验
			options: [
				{
					value: null,
					label: '全部',
				},
				{
					value: 0,
					label: '待结算',
				},
				{
					value: 1,
					label: '已结算',
				},
			],
			statistics: {
				totalAdd: 0,
				totalSub: 0,
				totalSurplus: 0,
			},
			businessType: [
				{
					value: null,
					label: '全部',
				},
				{
					value: '充值消费券赠送',
					label: '充值消费券赠送',
				},
				{
					value: '后台代采购',
					label: '后台充值',
				},
			],
			value: '',
		};
	},
	created() {
		this.getList();
		this.getBalanceStatistics();
	},
	methods: {
		cascader(val) {
			if (Array.isArray(val)) {
				this.queryParams.businessType = val[val.length - 1];
				return;
			}
			this.queryParams.businessType = null;
		},
		getBalanceStatistics() {
			this.$request.get('/charge/mall/pc/balanceStatistics?balanceType=1').then((res) => {
				this.statistics = res.data;
			});
		},
		handleDetail(row) {
			this.info = row;
			this.openDetails = true;
		},
		formatDate(row, column) {
			let cellValue = row[column.property];
			if (cellValue == null || cellValue == '') return '';
			var date = new Date(cellValue);
			var year = date.getFullYear();
			var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
		},
		/** 搜索订单列表 */
		getList() {
			this.loading = true;
			getGoodsRollRecord(this.queryParams)
				.then((response) => {
					this.orderList = response.data.records;
					this.total = response.data.total;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleClose() {
			this.openDetails = false;
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {};
			this.resetForm('form');
		},
		//获取时间
		getTime(startTime, endTime) {
			this.queryParams.beginTime = startTime;
			this.queryParams.endTime = endTime;
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.child.resetTime();
			this.queryParams.types = [];
			this.queryParams.businessType = null;
			this.queryParams.balanceType = '消费券';
			this.resetForm('queryForm');
			this.handleQuery(false);
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有提货单记录数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					return this.$request.post('/charge/mall/pc/export', queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
		submitForm() {
			this.formLoading = true;
			this.$request
				.post('/charge/mall/pc/updateGoodsRollRecord', this.info)
				.then(() => {
					this.msgSuccess('结算成功');
					this.openDetails = false;
					this.getList();
				})
				.finally(() => {
					this.formLoading = false;
				});
		},
	},
};
</script>
<style lang="scss" scoped>
.content {
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 31px;
	color: #333333;
	margin-bottom: 22px;
	/*margin-top: 20px;*/
	.title {
		font-weight: bold;
		font-size: 14px;
	}

	.content-info {
		display: flex;
		margin-top: 8px;

		.info2 {
			padding-left: 23px;
			position: relative;

			::after {
				content: '';
				position: absolute;
				left: 0;
				top: 20px;
				width: 1px;
				height: 30px;
				background: #cccccc;
				opacity: 1;
			}
		}

		.info {
			width: 33.33%;

			> div {
				margin-top: 10px;
			}
		}
	}
}

::v-deep .modal-dialog .el-dialog__body {
	padding: 32px 32px 0;
}

::v-deep .modal-dialog .el-dialog__body .el-form .el-input {
	width: 250px;
}

::v-deep .modal-dialog .el-dialog__body .el-input.is-disabled .el-input__inner {
	border: 1px solid #e5e5e5;
	background: #ffff;
}

.btn-box {
	display: flex;
	align-content: center;
	justify-content: center;
	margin: 40px 0 50px;

	&-item {
		width: 140px;
		height: 45px;
		background: #fff;
		color: #333;
		border: 1px solid #e5e5e5;

		&:nth-child(2) {
			background: #a4adb3;
			color: #fff;
			margin-left: 20px;
		}
	}
}

::v-deep .el-form-item {
	margin-bottom: 8px;
}

::v-deep .modal-dialog .el-dialog__body .el-form-item__label {
	font-weight: bold;
}
</style>
